import React, { useEffect, useState, useRef } from 'react'
import {
  Tabs,
  Input,
  List,
  Avatar,
  Row,
  Col,
  Space,
  AutoComplete,
  Divider,
  Select,
  Button,
  message
} from 'antd'
import {
  ProCard,
  ProDescriptions,
  ProTable,
  TableDropdown,
  ProFormText,
  ProForm,
  ProFormTextArea,
  ProFormRadio,
  ProFormDependency,
  ProFormSelect,
} from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';
import {
  reqPatientList,
  reqDetal,
  reqUpdate,
  reqPulseUpdate,
  reqPulseDetail,
  reqPulseList,
  reqQuestionTermList,
  reqIllnessList
} from '@/services/basicConsultation';

import { EditModal } from './components/EditModal'
import styles from './index.module.less'

const QuestionTerm = ({
  user,
  upDataInfo,
  readonly
}) => {
  // const [formObj] = ProForm.useForm()

  // const [data, setData] = useState([])

  // async function init() {
  //   try {
  //     const res = await reqQuestionTermList({
  //       pageNum: 1,
  //       pageSize: 10,
  //       // dept: "内科",
  //       // type: 1
  //     })

  //     console.log('病种病名列表信息 :>> ', res?.data);
  //     if (res?.resultCode == '00000000') {
  //       setData(res?.data?.result)
  //     } else {
  //       message.error(`病种病名列表信息出错！${res?.message}`)
  //     }
  //   } catch (error: any) {
  //     message.error('病种病名列表信息出错！', error)
  //     console.log('病种病名列表信息出错！ :>> ', error);
  //   }
  // }


  // useEffect(() => {
  //   if (user?.id && !user.basicInquiryJson) {
  //     console.log('user ==========:>> ', user);
  //     init()
  //   }
  // }, [user])

  // function jsonToarray(json: string) {
  //   const arr = JSON.parse(json);
  //   return arr.map((item: string) => ({
  //     label: item,
  //     value: item
  //   }))
  // }


  // async function handleAdd(values: object) {
  //   const basicInquiryJson = data.map((item: object) => {
  //     const options = jsonToarray(item?.optionAnswer);
  //     let newItem = {
  //       // ...item,
  //       // optionAnswer: JSON.parse(item?.optionAnswer),
  //       // options,
  //       question: item?.question,
  //     };
  //     if (values[item?.id]) {
  //       newItem.value = values[item?.id]
  //     }
  //     return newItem
  //   })
  //   console.log('输入病史 :>> ', values, basicInquiryJson);
  //   upDataInfo && upDataInfo({ basicInquiryJson: JSON.stringify(basicInquiryJson) })
  // }
  const [basicInquiryJson, setBasicInquiryJson] = useState(
    JSON.parse(user?.basicInquiryJson) ||
    []
  )

  const [isOpen, setIsOpen] = useState(false)

  function addQuestion() {
    setIsOpen(true)
  }


  async function handleModal(newBasicInquiryJson) {
    if (newBasicInquiryJson) {
      upDataInfo && upDataInfo({
        basicInquiryJson: JSON.stringify(newBasicInquiryJson)
      })
      setBasicInquiryJson(newBasicInquiryJson)
    }
    setIsOpen(false)
  }



  return (

    <>
      <Row gutter={[24, 12]} style={{maxHeight:400,overflow:'auto'}}>
        {
          basicInquiryJson.map((item: any, index: number) => (
            <Col span={24} key={index}>
              <div className={styles.question}>{index+1}问:{item?.question}</div>
              <div>答:{item?.value}</div>
              <Divider/>
            </Col>
          ))
        }
        <Col span={24} style={{position:'absolute',bottom:'15px'}}>
          {!readonly && <Button type='primary' onClick={addQuestion}>追加问题</Button>}
        </Col>
      </Row>
      {isOpen &&
        <EditModal
          row={{ ...user, basicInquiryJson }}
          isOpen={isOpen}
          handleModal={handleModal}
          actionRef
        />
      }
    </>

  )
}


export default QuestionTerm